<template>
<span @dblclick="showEdit=true">
  <span v-if="!showEdit">{{columnName}}</span>
  <span v-else>
    <input v-model="newColumnName">
    <button @click="newNameOk">确定</button>
    <button @click="newNameCancel">取消</button>
  </span>
</span>
</template>

<script>
export default {
  name: "TableHeaderEdit",
  props: {
    columnName: String,
    columnProperty: String
  },
  data() {
    return {
      showEdit: false,
      newColumnName: this.columnName
    }
  },
  methods: {
    newNameOk() {
      this.$emit("column-change", this.columnProperty, this.newColumnName)
      this.showEdit = false;
    },
    newNameCancel() {
      this.newColumnName = this.columnName;
      this.showEdit = false;
    }
  }
}
</script>

<style scoped>

</style>